<template>
  <div class="module-container">
    <ModuleHeader title="市场观点" />

    <div class="table-container">
      <el-table
        :data="marketViewData"
        :span-method="objectSpanMethod"
        border
        style="width: 100%"
        :header-cell-style="{ background: '#f9fafb' }"
      >
        <el-table-column prop="assetClass" label="大类资产" width="120" align="center" />
        <el-table-column prop="subAsset" label="细分资产" width="120" align="center" />
        <el-table-column prop="strategy" label="策略观点" min-width="300" show-overflow-tooltip />
        <el-table-column label="谨慎" width="80" align="center">
          <template #default="{ row }">
            <el-radio :model-value="row.cautious" disabled class="!text-blue-600" />
          </template>
        </el-table-column>
        <el-table-column label="中性" width="80" align="center">
          <template #default="{ row }">
            <el-radio :model-value="row.neutral" disabled class="!text-blue-600" />
          </template>
        </el-table-column>
        <el-table-column label="乐观" width="80" align="center">
          <template #default="{ row }">
            <el-radio :model-value="row.optimistic" disabled class="!text-blue-600" />
          </template>
        </el-table-column>
        <el-table-column label="边际变化" width="100" align="center">
          <template #default="{ row }">
            <div
              v-if="row.marginalChange === 'up'"
              class="flex items-center justify-center text-red-500"
            >
              <el-icon class="mr-1"><ArrowUp /></el-icon>
              上升
            </div>
            <div
              v-else-if="row.marginalChange === 'down'"
              class="flex items-center justify-center text-green-500"
            >
              <el-icon class="mr-1"><ArrowDown /></el-icon>
              下降
            </div>
            <span v-else class="text-gray-500">-</span>
          </template>
        </el-table-column>
        <el-table-column prop="recommendedTarget" label="推荐标的" width="150" align="center" />
        <el-table-column prop="code" label="代码" width="120" align="center">
          <template #default="{ row }">
            <span class="font-mono">{{ row.code }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
import ModuleHeader from '../common/ModuleHeader.vue'
import { useMarketViewData } from '../hooks/useMarketViewData'

const { marketViewData } = useMarketViewData()

// 生成每一行在“大类资产”列的 rowspan 配置：
// 同一大类资产的相邻行合并，组内第一行设置为组长度，其余行为0
const assetRowSpans = computed(() => {
  const spans: number[] = []
  const list = marketViewData.value
  let i = 0
  while (i < list.length) {
    let j = i + 1
    while (j < list.length && list[j].assetClass === list[i].assetClass) {
      j++
    }
    // 组 [i, j) 的第一个元素设置为组长度，其余置0
    spans[i] = j - i
    for (let k = i + 1; k < j; k++) {
      spans[k] = 0
    }
    i = j
  }
  return spans
})

// 表格合并方法
const objectSpanMethod = ({ rowIndex, columnIndex }: any) => {
  if (columnIndex === 0) {
    const rowspan = assetRowSpans.value[rowIndex] ?? 1
    return { rowspan, colspan: 1 }
  }
  return { rowspan: 1, colspan: 1 }
}
</script>

<style scoped>
.module-container {
  @apply bg-white rounded-[4px] shadow-sm mb-6 overflow-hidden;
  border: 1px solid #d4d8e5;
}

.table-container {
  @apply p-[20px];
}
</style>
